<template>
    <div class="loadingPage" v-show="isShowLoadingPage" v-loading="loading"
        :style="{ backgroundImage: `url(${backgroundImage})` }">
        <div class="content">
            <div class="logo">
                <img class="logo" :src="logoUrl" alt="">
            </div>
            <div class="VideoModuel" v-show="filesId">
                <VideoModuel :src="filesId"></VideoModuel>
            </div>
            <div class="text" v-show="!filesId && content">
                <!-- <div class="text" > -->
                <ScrollingText v-if="!loading" :text="content" :height="'calc(80vh - 160px)'"></ScrollingText>
            </div>
        </div>
        <div class="comeToIndex" @click="jumpToIndex">
            进入首页
            <i class="el-icon-right"></i>
        </div>
    </div>
</template>

<script>
import homepageApi from "@/api/homepage"
import ScrollingText from "@/components/ScrollingText"
import VideoModuel from "@/components/Video"
import $baseUrl from '@/utils/baseURL';
export default {
    name: 'loadingPage',
    props: {
        imageUrl: {
            type: String,
            default: () => {
                return ''
            }
        }
    },
    components: { ScrollingText, VideoModuel },
    data() {
        return {
            isShowLoadingPage: false,
            loading: false,
            backgroundImage: '',
            content: '',
            filesId: '',
            logoUrl:''
        }
    },
    mounted() {
        this.isLoding()
    },
    methods: {
        isLoding() {
            let loadingPageFlag = sessionStorage.loadingPageFlag;
            console.log(loadingPageFlag)
            if (loadingPageFlag == 1) {
                this.isShowLoadingPage = false;
                console.log(this.isShowLoadingPage)
            } else {
                this.isShowLoadingPage = true;
                this.queryLoadPage()
            }
        },
        queryLoadPage() {
            this.loading = true;
            homepageApi.queryLoadPage().then(res => {
                this.loading = false;
                let data = res.data || {}
                if (data&&data.status) {
                    this.backgroundImage = data.backgroundImage ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.backgroundImage}` : ''
                    this.filesId = data.filesId ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.filesId}` : '';
                    this.logoUrl= data.logo ? `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.logo}` : '';
                    this.content = data.content || '';
                    this.isShowLoadingPage = true;
                } else {
                    this.isShowLoadingPage = false;
                }

            }).catch(err => {
                this.loading = false;
            });
        },
        jumpToIndex() {
            this.isShowLoadingPage = false;
            sessionStorage.setItem('loadingPageFlag', 1)
        },
    },
}
</script>

<style lang="scss" scoped>
.loadingPage {
    position: fixed;
    z-index: 9999999;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;

    .content {
        width: 60%;
        height: 100%;
        margin: 0 auto;
        padding: 10vh 0;

        .logo {
            height: 70px;
            padding-bottom: 10px;
        }

        .text {
            height: calc(80vh - 120px);
            margin: 20px 0;
            padding: 20px;
            background-color: #ffffffe0;
            border-radius: 20px;
            box-sizing: border-box;
            box-shadow: 0 0 20px 16px #00000019;
        }
    }

    .comeToIndex {
        height: 60px;
        padding: 0 50px;
        border-radius: 30px;
        background-color: #0b72cd;
        position: absolute;
        bottom: 20px;
        right: 30px;
        box-shadow: 0 0 20px 10px #00000006;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
            transform: translateX(10px);
        }
    }
}

.VideoModuel {
    height: 900px;
    height: 600px;
}
</style>